<template>
  <ul class="roster-mian">
      <ul class="roster-mian-top">
        <li class="mian-top-float">
          <img src="../../../assets/home/hmc_renzheng.png" />
          <span>通知认证</span> 
        </li>
        <li>
          <div class="item" @click="exportGroup">
            <img src="../../../assets/home/hmc_renzheng.png" />
            <span class="c-span">导出</span>
          </div>
          <div class="item">
            <img src="../../../assets/home/hmc_renzheng.png" />
            <span class="c-span">打印</span>
          </div>
          <div class="item">
            <el-popover popper-class="item-popover" placement="bottom" width="416" trigger="click">
            <el-checkbox-group v-model="checkedOptions" @change="handleCheckedData">
              <el-checkbox v-for="item in headerOptions" :label="item.value" :key="item.value" class="checkbox-line">{{item.label}}</el-checkbox>
            </el-checkbox-group>
            <el-button type="text" slot="reference"><img src="../../../assets/home/hmc_renzheng.png" />
            <span class="c-span">筛选</span></el-button>
          </el-popover>
          </div>
        </li>
      </ul>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        class="roster-mian-tabs"
        :cell-style="{ color: '#666', fontSize: '14px' }"
        :header-cell-style="{
          background: '#f7f7f7',
          color: '#333',
          fontSize: '14px',
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" class="check"> </el-table-column>
        <el-table-column width="50">
          <template slot-scope="scope">
            <img class="tabs-img" :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120" v-if="isShowForm.name">
          <template slot-scope="scope"><span style="color:#0061D5">{{ scope.row.name }}</span></template>
        </el-table-column>
        <el-table-column label="公司" :show-overflow-tooltip="true" width="120" v-if="isShowForm.company">
          <template slot-scope="scope">{{ scope.row.company }}</template>
        </el-table-column>
        <el-table-column prop="branch" label="部门" v-if="isShowForm.branch"> </el-table-column>
        <el-table-column
          prop="position"
          min-width="100px"
          :show-overflow-tooltip="true"
          label="职位"
          v-if="isShowForm.position"
        >
        </el-table-column>
        <el-table-column prop="phone" min-width="120px" label="手机号" v-if="isShowForm.phone">
        </el-table-column>
        <el-table-column prop="condition" label="认证状态" v-if="isShowForm.condition">
          <!-- <template slot-scope="scope"><span style="color:#0061D5">{{ scope.row.name }}</span></template> -->
        </el-table-column>
        <el-table-column prop="mailbox" min-width="140px" label="邮箱" v-if="isShowForm.mailbox">
        </el-table-column>
        <el-table-column
          prop="type"
          :filters="[
            { text: '固定劳动合同', value: '2016-05-01' },
            { text: '非固定劳动合同', value: '2016-05-02' },
            { text: '以完成一定任务', value: '2016-05-03' },
          ]"
          min-width="100px"
          :filter-multiple='false'
          label="合同类型"
          v-if="isShowForm.contractType"
        >
        </el-table-column>
        <el-table-column
          prop="signatureNumber"
          sortable
          min-width="120px"
          label="第几次签订"
          v-if="isShowForm.signatureNumber"
        >
        </el-table-column>
        <el-table-column prop="compactTime" label="合同期限" v-if="isShowForm.compactTime"> </el-table-column>
        <el-table-column
          prop="compactStartTime"
          min-width="120px"
          label="合同开始时间"
          v-if="isShowForm.compactStartTime"
        >
        </el-table-column>
        <el-table-column
          prop="compactEndTime"
          min-width="120px"
          label="合同结束时间"
          v-if="isShowForm.compactEndTime"
        >
        </el-table-column>
        <el-table-column prop="onFile" label="存档状态" v-if="isShowForm.onFile"> </el-table-column>
        <el-table-column prop="nativePlace" label="户籍" v-if="isShowForm.nativePlace"> </el-table-column>
        <el-table-column prop="site" label="现地址" v-if="isShowForm.site"> </el-table-column>
        <el-table-column prop="workState" label="工作状态" v-if="isShowForm.workState"> </el-table-column>
        <el-table-column prop="crad" label="身份证号" v-if="isShowForm.crad"> </el-table-column>
        <el-table-column prop="employmentForm" label="用工形式" v-if="isShowForm.employmentForm"> </el-table-column>
        <el-table-column prop="birthTime" label="出生日期" v-if="isShowForm.birthTime"> </el-table-column>
        <el-table-column prop="age" label="年龄" v-if="isShowForm.age"> </el-table-column>
        <el-table-column prop="sex" label="性别" v-if="isShowForm.sex"> </el-table-column>
        <el-table-column prop="entryTime" label="入职日期" v-if="isShowForm.entryTime"> </el-table-column>
        <el-table-column prop="workAge" label="工龄" v-if="isShowForm.workAge"> </el-table-column>
        <el-table-column prop="monthlyPay" label="月薪" v-if="isShowForm.monthlyPay"> </el-table-column>
        <el-table-column prop="school" label="毕业院校" v-if="isShowForm.school"> </el-table-column>
        <el-table-column prop="major" label="专业" v-if="isShowForm.major"> </el-table-column>
        <el-table-column prop="education" label="学历" v-if="isShowForm.education"> </el-table-column>
        <el-table-column prop="socialSecurity" label="社保号" v-if="isShowForm.socialSecurity"> </el-table-column>
        <el-table-column prop="remark" label="备注" v-if="isShowForm.remark"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="redact(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt-2"
        background
        style="text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="2"
        :page-sizes="[100, 200, 500, 400]"
        :page-size="3"
        layout=" prev, pager, next, jumper"
        :total="5"
      >
      </el-pagination>
    </ul>
</template>

<script>
export default {
  data(){
    return {
      //默认筛选显示
      isShowForm:{
        name:true,
        company:true,//公司
        branch:true,//部门
        position:true,//职位
        phone:true,//手机号
        condition:true,//认证状态
        mailbox:true,//邮箱
        contractType:true,//合同类型
        signatureNumber:true,//签订次数
        compactTime:true,//合同期限
        compactStartTime:true,//合同开始时间
        compactEndTime:true,//合同结束时间
        onFile:true,//存档状态
        nativePlace:false,//户籍
        site:false,//现地址
        workState:false,//工作状态
        crad:false,//身份证号码
        employmentForm:false,//用工形式
        birthTime:false,//出生日期
        age:false,//年龄
        sex:false,//性别
        entryTime:false,//入职日期
        workAge:false,//工龄
        monthlyPay:false,//月薪
        school:false,//毕业院校
        major:false,//专业
        education:false,//学历
        socialSecurity:false,//社保号
        remark:false,//备注
      },
      checkedOptions:[//初始化筛选显示
        'name',
        'company',
        'position',
        'phone',
        'branch',
        'condition',
        'mailbox',
        'contractType',
        'signatureNumber',
        'compactTime',
        'compactStartTime',
        'compactEndTime',
        'onFile'
        ],
      headerOptions:[//筛选列表
        {label:'姓名',value:'name'},
        {label:'公司',value:'company'},
        {label:'部门',value:'branch'},
        {label:'职位',value:'position'},
        {label:'手机号',value:'phone'},
        {label:'邮箱',value:'mailbox'},
        {label:'合同类型',value:'contractType'},
        {label:'第几次签订',value:'signatureNumber'},
        {label:'合同期限',value:'compactTime'},
        {label:'合同开始时间',value:'compactStartTime'},
        {label:'合同结束时间',value:'compactEndTime'},
        {label:'存档状态',value:'onFile'},
        {label:'认证状态',value:'condition'},
        {label:'户籍',value:'nativePlace'},
        {label:'现地址',value:'site'},
        {label:'工作状态',value:'workState'},
        {label:'身份证号',value:'crad'},
        {label:'用工形式',value:'employmentForm'},
        {label:'出生日期',value:'birthTime'},
        {label:'年龄',value:'age'},
        {label:'性别',value:'sex'},
        {label:'入职日期',value:'entryTime'},
        {label:'工龄',value:'workAge'},
        {label:'月薪',value:'monthlyPay'},
        {label:'毕业院校',value:'school'},
        {label:'专业',value:'major'},
        {label:'学历',value:'education'},
        {label:'社保号',value:'socialSecurity'},
        {label:'备注',value:'remark'},
      ],
      tableData: [
        {
          company: "白晶晶有限公司",
          name: "王小虎",
          branch: "研发部",
          phone: "15999555555",
          position: "大测元数据工程师",
          condition: "未认证",
          img: "@/assets/home/ceshi.png",
          mailbox: "120111111@qq.com",
          type: "无类型",
          signatureNumber: "99",
          compactTime: "2年",
          compactStartTime: "2021-11-11",
          compactEndTime: "2021-11-121",
          onFile: "未存",
        },
      ],
      multipleSelection: [],
    }
  },
  methods:{
    //点击多选判断是否展示
    handleCheckedData(val){
      this.isShowForm.name= val.includes('name') ? 1 :0
      this.isShowForm.company= val.includes('company') ? 1 :0
      this.isShowForm.branch= val.includes('branch') ? 1 :0
      this.isShowForm.position= val.includes('position') ? 1 :0
      this.isShowForm.mailbox= val.includes('mailbox') ? 1 :0
      this.isShowForm.contractType= val.includes('contractType') ? 1 :0
      this.isShowForm.signatureNumber= val.includes('signatureNumber') ? 1 :0
      this.isShowForm.compactTime= val.includes('compactTime') ? 1 :0
      this.isShowForm.compactStartTime= val.includes('compactStartTime') ? 1 :0
      this.isShowForm.compactEndTime= val.includes('compactEndTime') ? 1 :0
      this.isShowForm.onFile= val.includes('onFile') ? 1 :0
      this.isShowForm.condition= val.includes('condition') ? 1 :0
      this.isShowForm.nativePlace= val.includes('nativePlace') ? 1 :0
      this.isShowForm.site= val.includes('site') ? 1 :0
      this.isShowForm.workState= val.includes('workState') ? 1 :0
      this.isShowForm.crad= val.includes('crad') ? 1 :0
      this.isShowForm.employmentForm= val.includes('employmentForm') ? 1 :0
      this.isShowForm.birthTime= val.includes('birthTime') ? 1 :0
      this.isShowForm.age= val.includes('age') ? 1 :0
      this.isShowForm.sex= val.includes('sex') ? 1 :0
      this.isShowForm.entryTime= val.includes('entryTime') ? 1 :0
      this.isShowForm.workAge= val.includes('workAge') ? 1 :0
      this.isShowForm.monthlyPay= val.includes('monthlyPay') ? 1 :0
      this.isShowForm.school= val.includes('school') ? 1 :0
      this.isShowForm.major= val.includes('major') ? 1 :0
      this.isShowForm.education= val.includes('education') ? 1 :0
      this.isShowForm.socialSecurity= val.includes('socialSecurity') ? 1 :0
      this.isShowForm.remark= val.includes('remark') ? 1 :0
    },
    //
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {},
    //点击编辑
    redact(data){
      console.log(data,'数据')
      this.$router.push({name:'userinformation'})
    },

    //导出拼团记录
    exportGroup() {
      let startTime;
      let endTime;
      if (this.selectDate) {
        let str = this.selectDate;
        startTime = str[0]; //开始时间
        endTime = str[1]; //结束时间
        startTime = this.publicFun.formatdate(startTime);
        endTime = this.publicFun.formatdate(endTime);
      }
      let queryParams = {
        startTime,
        endTime,
        groupId: this.groupCondition.groupId,
        timeType: this.isTime,
        goodsName: this.groupCondition.name,
        dictName: "",
        dictType: "",
        pageNum: 1,
        pageSize: 10,
      };
      this.$confirm("是否确认导出所有类型数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // return getExportRecord(queryParams); //先获取后端文件接口
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
  }
}
</script>

<style>

</style>